<template>
  <div class="box">
<ul>
  
    <div
      class="song"
      v-for="(item,index,id) in songs"
      :key="id"
      @click="playMusic(item.id)"
    >
    <li>
  <!-- <span>{{index}}</span> -->
     <div class="fresult van-ellipsis" v-html="$options.filters.high(item.name, value)"></div>
      <!-- <p class="fresult van-ellipsis">{{ item.name }} <span></span></p> -->
      <p class="sre van-ellipsis">
        <span style="color:red" class="tagColorg" v-if="item.fee == 1 || item.fee == 4"
          >vip
        </span>
        <span class="tagColor" v-else>SQ </span>
        <em v-for="data in item.artists" :key="data.id">
          <!-- {{ data.name }} -->
            <i v-html="$options.filters.high(data.name, value)"></i>
            {{ data.id | filterchar(data.length) }}
        </em>
        
        <em v-html="$options.filters.high(item.album.name, value)"></em>
      </p>
      </li>
    </div>
    </ul>
  </div>
</template>


  

<script>
export default {
  name: "VueMusicSearchSuggest",
  props: {
 // 第一种写法，直接写类型
 value:[String, Number,Object,Array],
 // 第二种写法，写对象
 songs: {
  type: [String, Number,Object,Array],
  default: ''
 }
},
  data() {
    return {};
  },

  mounted() {
   
  },
created(){
  
},

  
  methods: {
    hot(hot) {
      this.$parent.onSearch(hot);
    },
    
    
  },
};
</script>

<script>
import axios from "axios";
import { GetsongdetailAPI } from "@/api/api.js";
export default {
  name: "MusicSearchMusics",
   props: {
 // 第一种写法，直接写类型
 value: String,
 // 第二种写法，写对象
songs: {
  type: [String, Number,Object,Array],
  default: ''
 }
},
  data() {
    return {};
  },
components:{},
  mounted() {},

  methods: {
     highKey(val, value) {
      let reg = new RegExp(`${value}`, "g");
      if (reg.test(val) && value.length>0) {
        val = val.replace(reg, `<b style="color:#20d59b">${value}</b>`);
      }
      return val;
    },
    playMusic(id) {
      axios.all([GetsongdetailAPI({ ids: id })]).then(
        axios.spread((detai) => {
          const musics = {
            id,
            name: detai.data.songs[0].name,
            picUrl: detai.data.songs[0].al.picUrl,
            ar: detai.data.songs[0].ar.map((arItem) => arItem.name).join("/"),
            arId: detai.data.songs[0].ar[0].id,
            arList: detai.data.songs[0].ar.map((items) => ({
              arname: items.name,
              arid: items.id,
            })),
            al: detai.data.songs[0].al.name,
            alId: detai.data.songs[0].al.id,
            fee: detai.data.songs[0].fee,
          };
          this.$store.commit({
            type: "SET_ADDMUSIC",
            music: musics,
          });
        })
      );
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  margin:0rem 10px;
  border-radius: 0.625rem;
 ul{
  .song {
    text-align: left;
    height: 3.2rem;
    padding: 0.425rem 0 0.425rem 0rem;
     border-bottom: 2px solid rgba(231, 231, 231, 0.555);
     li{
       line-height: 3.2rem;
       height: 3.2rem;
       background:url('../../static/img/smusic.jpg')  no-repeat left center ;
   
   
    padding-left:60px;
     .fresult{line-height: 2rem;
     height: 2rem;}
     .sre{
       line-height: 1rem;
       height:1 rem;
     }
    .van-ellipsis{
      .tagColorg{
        color:gray;
       
      }
    }
    p:nth-child(1) {
      font-size: 1rem;
      color: #444;
      span {
        color: #a0a0a0;
      }
    }
    p:nth-child(2) {
      margin-top: 0.3125rem;
      font-size: 0.75rem;
      color: #a0a0a0;
      span {
        color: #4fc08d;
      }
    }
  }
  .song:nth-last-child(1) {
    border-bottom: none;
  }
  }
 }
}
</style>